<template>
  <div class="answer">
    <div class="form-label2">
      <label>答案</label>
      <p>（请将答案填写在下方输入框中）</p>
    </div>
    <template v-if="form.answer.content != undefined">
      <div class="third-indent">
        <editor v-model="form.answer.content" :readOnly="readOnly" :min-height="180"/>
      </div>
      <div v-if="!readOnly" class="choice-more" @click="onCancel">取消答案</div>
    </template>
  </div>
</template>
  
<script>
// 简答题
const defaultForm = JSON.stringify({
  answer: { content: '' }
});

export default {
  name: "ShortAnswer",
  props: {
    initialVals: {
      type: Object,
      default: () => ({}),
    },
    clean: {
      type: String,
      default: '',
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    validate: {  // 触发内层表单校验
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: JSON.parse(defaultForm)
    }
  },
  watch: {
    initialVals: {
      handler(val) {
        if (Object.keys(val).length > 0) this.form = { ...this.form, ...val };
      },
      immediate: true,
    },
    validate: {
      handler(val) {
        // TODO: 校验表单
        console.log(val);
        this.$emit('onValid', true);
      }
    },
    clean: {
      handler(val) {
        if (val) this.form = JSON.parse(defaultForm);
      }
    },
    form: {
      handler(val) {
        this.$emit('change', JSON.parse(JSON.stringify(val)));
      },
      deep: true
    }
  },
  methods: {
    onCancel() {
      this.form.answer = {};
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
    